<script setup>
import { ref, onMounted, inject } from 'vue'
import { useRoute } from 'vue-router'
import { doGet,doPost } from '@/http/httpRequest'
import { showMessage } from '@/util/message'


let route = useRoute();

let tranDetail = ref({
    stageDo: {}
})
let tranRemark = ref({})

onMounted(() => {
    //加载交易详情
    loadTranDetail();
})

//加载交易详情
const loadTranDetail = () => {
    //拿到路由地址中的tranId参数
    let id = route.params.tranId;
    doGet('/api/tran/' + id, {}).then(resp => {
        if (resp && resp.data.code == 200) {
            tranDetail.value = resp.data.info;
        } else {
            showMessage('数据加载失败', 'error');
        }
    })
}


//交易弹窗
let updateTranDialogVisible = ref(false)

let tranHistory = ref({})

const updateTran = () => {
    updateTranDialogVisible.value = true
}


//查询交易阶段下拉框
let stageOptions = ref([{}])

//查询下拉框数据
const loadDicValue = async typeCode => {
    let resp = await doGet('/api/dic/' + typeCode, {})

    if (resp && resp.data.code == 200) {
        stageOptions.value = resp.data.info
    } else {
        showMessage('数据加载失败', 'error');
    }
}


//更新交易阶段
let flushPage = inject('flush')

const updateTranSubmit = async () => {
    let resp = await doPost('/api/tran/stage', {
        tranId: route.params.tranId,
        stage: tranHistory.value.stage,
        money: tranHistory.value.money,
        expectedDate: tranHistory.value.expectedDate
    })
    if (resp.data.code == 200) {
        showMessage('更新成功', 'success');
        flushPage()
    } else {
        showMessage('更新失败', 'error');
    }
}

</script>

<template>
    <el-form :model="tranRemark" label-width="121">

        <el-form-item label="ID">
            <div class="detail">&nbsp;{{ tranDetail.id }}</div>
        </el-form-item>

        <el-form-item label="交易流水号">
            <div class="detail">&nbsp;{{ tranDetail.tranNo }}</div>
        </el-form-item>

        <el-form-item label="客户详情">
            <div class="detail">&nbsp;<router-link
                    :to="'/dashboard/customer/' + tranDetail.customerId">查看客户详情</router-link></div>
        </el-form-item>

        <el-form-item label="交易金额">
            <div class="detail">&nbsp;{{ tranDetail.money }}</div>
        </el-form-item>

        <el-form-item label="预计成交时间">
            <div class="detail">&nbsp;{{ tranDetail.expectedDate }}</div>
        </el-form-item>

        <el-form-item label="交易阶段">
            <div class="detail">&nbsp;{{ tranDetail.stageDo.typeValue }}</div>
        </el-form-item>

        <el-form-item label="交易描述">
            <div class="detail">&nbsp;{{ tranDetail.description }}</div>
        </el-form-item>

        <el-form-item label="下次跟踪时间">
            <div class="detail">&nbsp;{{ tranDetail.nextContactTime }}</div>
        </el-form-item>


        <el-form-item label="跟踪记录" prop="noteContent">
            <el-input v-model="tranRemark.noteContent" style="padding-left: 0;" :rows="8" type="textarea"
                placeholder="请输入交易跟踪记录" />
        </el-form-item>

        <el-form-item label="跟踪方式" prop="noteWay">
            <el-select v-model="tranRemark.noteWay" placeholder="请选择跟踪方式" style="width: 100%;padding-left: 0;" clearable
                @click="loadDicValue('noteWay')">
                <el-option v-for="item in noteWayOptions" :key="item.id" :label="item.typeValue" :value="item.id" />
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button type="success" @click="customerRemarkSubmit(clueRemarkRuleFormRef)">提 交</el-button>
            <el-button type="primary" @click="updateTran">更新交易阶段</el-button>
            <el-button type="success" plain @click="goBack">返 回</el-button>
        </el-form-item>
    </el-form>



    <!--更新交易阶段的对话框-->
    <el-dialog v-model="updateTranDialogVisible" title="更新交易阶段" width="800" center>
        <el-form  :model="tranHistory" label-width="110">

            <el-form-item label="交易阶段" prop="stage">
                <el-select v-model="tranHistory.stage" placeholder="请选择交易阶段" style="width: 100%;padding-left: 0;"
                    clearable @click="loadDicValue('stage')">
                    <el-option v-for="item in stageOptions" :key="item.id" :label="item.typeValue" :value="item.id"
                        :disabled="item.order <= tranDetail.stageDo.order" />
                </el-select>
            </el-form-item>

            <el-form-item label="交易金额" prop="money">
                <el-input v-model="tranHistory.money" style="padding-left: 0;" />
            </el-form-item>

            <el-form-item label="预计成交时间" prop="expectedDate">
                <el-date-picker style="width: 100%;" v-model="tranHistory.expectedDate" type="datetime"
                    placeholder="请选择预计成交时间" value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="updateTranDialogVisible = false">关 闭</el-button>
                <el-button type="primary" @click="updateTranSubmit()">更 新</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style scoped></style>
